<template>
    <div class="basic-head">
        <a-layout-header style="background: #fff; padding: 0;height: 40px;line-height: 40px;">
            <div class="clearfix pr-10">
                <a-icon class="trigger pull-left fs-18"
                        style="line-height: 40px;"
                        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                        @click="this.toggleCollapsed"/>
                <div class="pull-right clearfix">
                    <div class="pull-left mr-10">
                        <a-icon type="user" />
                    </div>
                    <div class="pull-left head-right cur-p" @mouseenter="showHeadPop = true" @mouseleave="showHeadPop = false">
                        <div>
                            <span class="mr-5">{{username}}</span>
                            <i class="fa fa-caret-down main-color fs-28" style="vertical-align: -5px;" aria-hidden="true"></i>
                        </div>
                        <div class="head-pop" v-show="showHeadPop">
                            <div class="text-c fs-14" @click="logOut">退出登录</div>
                        </div>
                    </div>
                </div>
            </div>
        </a-layout-header>
        <p-Loading-el :loading="loading" @closeLoading="loading = false"></p-Loading-el>
    </div>
</template>

<script>
    export default {
        props: {
            collapsed: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                showHeadPop: false,
                loading: false,
                username: ''
            };
        },
        mounted () {
            this.username = this.$ls.get('AUTHORIZATION').username;
            // this.username = 'admin';
        },
        methods: {
            toggleCollapsed () {
                this.$emit('toggleCollapsed');
            },
            logOut () {
                this.loading = true;
                sessionStorage.clear();
                localStorage.clear();
                this.$store.dispatch('logout').then(() => {
                    this.$router.push({path: '/login'});
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                });
            }
        }
    };
</script>

<style scoped lang="scss">
    .basic-head{
        .caret-down{
            color: $main-color!important;
        }
        .head-right{
            position: relative;
            .head-pop{
                position: absolute;
                right: -9px;
                top: 40px;
                width: 150px;
                padding: 5px 10px;
                box-sizing: border-box;
                background-color: #fff;
                z-index: 400;
                border-radius: 5px;
                -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 0, rgba(0, 0, 0, 0.25) 0 2px 5px 0;
                box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 0, rgba(0, 0, 0, 0.25) 0 2px 5px 0;
                div:hover{
                    color: $main-color;
                }
            }
        }
    }
</style>
